<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文本智能助手设置</title>
  <style>
    body {
      padding: 20px;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      font-family: system-ui, -apple-system, sans-serif;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input[type="text"], textarea, select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    textarea {
      height: 100px;
      resize: vertical;
    }
    button {
      background: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #45a049;
    }
    .status {
      margin-top: 10px;
      padding: 10px;
      border-radius: 4px;
      display: none;
    }
    .success {
      background: #dff0d8;
      color: #3c763d;
    }
    .error {
      background: #f2dede;
      color: #a94442;
    }
    .menu-item-container {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      align-items: start;
    }
    
    .menu-item-fields {
      flex-grow: 1;
    }
    
    .secondary-btn {
      background: #757575;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .delete-btn {
      background: #f44336;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    /* 深色模式适配 */
    @media (prefers-color-scheme: dark) {
      body {
        background: #1a1a1a;
        color: #e0e0e0;
      }
      
      input[type="text"], textarea, select {
        background: #2d2d2d;
        border-color: #404040;
        color: #e0e0e0;
      }
      
      .success {
        background: #1b4d1b;
        color: #a3d7a3;
      }
      
      .error {
        background: #4d1b1b;
        color: #d7a3a3;
      }
    }
  </style>
</head>
<body>
  <h1>文本智能助手设置</h1>
  
  <div class="form-group">
    <label for="apiKey">SiliconFlow API Key:</label>
    <input type="text" id="apiKey" placeholder="输入你的 API Key">
  </div>

  <div class="form-group">
    <label for="model">选择模型:</label>
    <select id="model">
      <option value="Qwen/Qwen2.5-7B-Instruct">Qwen2.5-7B-Instruct (免费)</option>
      <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-32B">DeepSeek-Qwen-32B (¥1.26/M Tokens)</option>
      <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-14B">DeepSeek-Qwen-14B (¥0.7/M Tokens)</option>
      <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-7B">DeepSeek-Qwen-7B (免费)</option>
      <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B">DeepSeek-Qwen-1.5B (免费)</option>
      <option value="deepseek-ai/DeepSeek-R1-Distill-Llama-70B">DeepSeek-Llama-70B (¥4.13/M Tokens)</option>
      <option value="deepseek-ai/DeepSeek-R1-Distill-Llama-8B">DeepSeek-Llama-8B (免费)</option>
    </select>
  </div>

  <div class="form-group model-info" style="font-size: 12px; color: #666;">
    <p>模型说明：</p>
    <ul style="margin-top: 5px;">
      <li>Qwen2.5-7B-Instruct: 基于 Qwen2.5-7B 的轻量模型，响应速度快</li>
      <li>DeepSeek-Qwen-32B: 基于 Qwen2.5-32B 的高性能模型，适合复杂任务</li>
      <li>DeepSeek-Qwen-14B: 基于 Qwen2.5-14B 的均衡模型，性能与成本平衡</li>
      <li>DeepSeek-Qwen-7B: 基于 Qwen2.5-7B 的免费模型，适合一般任务</li>
      <li>DeepSeek-Qwen-1.5B: 基于 Qwen2.5-1.5B 的轻量模型，响应速度快</li>
      <li>DeepSeek-Llama-70B: 基于 Llama-3.3-70B 的大规模模型，性能最强</li>
      <li>DeepSeek-Llama-8B: 基于 Llama-3.1-8B 的免费模型，性能适中</li>
    </ul>
  </div>

  <div class="form-group">
    <label for="translatePrompt">翻译提示语:</label>
    <textarea id="translatePrompt" placeholder="自定义翻译提示语">请将以下文本翻译成英文：</textarea>
  </div>

  <div class="form-group">
    <label for="commentPrompt">评论提示语:</label>
    <textarea id="commentPrompt" placeholder="自定义评论提示语">请对以下文本进行回复，要共情，要感同身受，要理解，要站在对方的角度思考问题，要更加口语化，不要太ai味儿，字数不超过50字：</textarea>
  </div>

  <div class="form-group">
    <label for="summarizePrompt">总结提示语:</label>
    <textarea id="summarizePrompt" placeholder="自定义总结提示语">请总结以下文本的主要内容：</textarea>
  </div>

  <div class="form-group">
    <label for="customMenus">自定义菜单:</label>
    <div id="menuList">
      <!-- 已有菜单项会在这里动态显示 -->
    </div>
    <button id="addMenu" class="secondary-btn">+ 添加菜单项</button>
  </div>

  <button id="save">保存设置</button>
  <div id="status" class="status"></div>

  <script src="options.js"></script>
</body>
</html> 